<template>
  <div class="learning-progress">
    <el-card class="progress-card">
      <template #header>
        <div class="card-header">
          <span>学习进度</span>
        </div>
      </template>

      <statistics-display :loading="loading" :error="error">
        <div v-if="statistics" class="statistics">
          <el-row :gutter="20">
            <el-col :span="12">
              <CourseCard :value="statistics.total" label="总词汇量" />
            </el-col>
            <el-col :span="12">
              <CourseCard :value="statistics.known" label="已掌握" />
            </el-col>
          </el-row>
          
          <div class="progress-chart">
            <div class="progress-info">
              <span>掌握进度</span>
              <span>{{ Math.round((statistics.known / statistics.total) * 100) }}%</span>
            </div>
            <el-progress 
              :percentage="Math.round((statistics.known / statistics.total) * 100)" 
              :show-text="false" 
              stroke-width="20" 
            />
          </div>
        </div>
      </statistics-display>
    </el-card>
  </div>
</template>

<script>
import CourseCard from './CourseCard.vue';
import StatisticsDisplay from './StatisticsDisplay.vue';

export default {
  name: 'LearningProgress',
  components: {
    CourseCard,
    StatisticsDisplay
  },
  data() {
    return {
      statistics: null,
      history: [],
      loading: false,
      error: null,
    };
  },
  async mounted() {
    await this.loadProgressData();
  },
  methods: {
    async loadProgressData() {
      this.loading = true;
      this.error = null;

      try {
        // Load statistics
        if (typeof window.electronAPI !== 'undefined' && window.electronAPI.getLearningStatistics) {
          const statsResponse = await window.electronAPI.getLearningStatistics();
          if (statsResponse.success) {
            this.statistics = statsResponse.data;
          } else {
            this.error = statsResponse.error;
          }
        }

        // Load history
        if (typeof window.electronAPI !== 'undefined' && window.electronAPI.getLearningHistory) {
          const historyResponse = await window.electronAPI.getLearningHistory(10);
          if (historyResponse.success) {
            this.history = historyResponse.data;
          } else {
            this.error = this.error || historyResponse.error;
          }
        }
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },

    calculatePercentage(part, total) {
      if (total === 0) return 0;
      return Math.round((part / total) * 100);
    },
  },
};
</script>

<style scoped>
.learning-progress {
  max-width: 800px;
  margin: 0 auto;
}

.progress-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-weight: 600;
  font-size: 18px;
  color: #333;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
}

.progress-card-main {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.progress-content {
  padding: 10px 0;
}

.progress-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.progress-text {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.error-alert {
  margin-bottom: 20px;
}

.history-section h3 {
  margin-top: 0;
  color: #333;
}
</style>
